<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CapitalFlow1</title>
    <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.js"></script>
</head>
<body>
<div id="chart-container" style="width: 98vw;height: 98vh;border: #0f0f0f solid 1px;"></div>
</body>
<script type="text/javascript">
    // 获取容器元素
    var container = document.getElementById('chart-container');

    // 创建图表实例
    var myChart = echarts.init(container);
    var option;

    option = {
        title: {
            text: 'Basic Graph'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
            {
                type: 'graph',
                layout: 'none',
                symbolSize: 150,
                roam: true,
                label: {
                    show: true
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    fontSize: 20
                },
                data: [
                    {
                        name: 'Node 1',
                        symbolSize: 350,
                        x: 300,
                        y: 300
                    },
                    {
                        name: 'Node 2',
                        x: 800,
                        y: 300
                    },
                    {
                        name: 'Node 3',
                        x: 550,
                        y: 100
                    },
                    {
                        name: 'Node 4',
                        x: 550,
                        y: 500
                    }
                ],
                // links: [],
                links: [
                    {
                        source: 0,
                        target: 1,
                        symbolSize: [5, 20],
                        label: {
                            show: true
                        },
                        lineStyle: {
                            width: 5,
                            curveness: 0.2
                        }
                    },
                    {
                        source: 'Node 2',
                        target: 'Node 1',
                        symbolSize: [0, 40],
                        label: {
                            show: true
                        },
                        lineStyle: {
                            width: 10,
                            curveness: 0.2
                        }
                    },
                    {
                        source: 'Node 1',
                        target: 'Node 3'
                    },
                    {
                        source: 'Node 2',
                        target: 'Node 3'
                    },
                    {
                        source: 'Node 2',
                        target: 'Node 4'
                    },
                    {
                        source: 'Node 1',
                        target: 'Node 4'
                    }
                ],
                lineStyle: {
                    opacity: 0.9,
                    width: 20,
                    curveness: 0
                }
            }
        ]
    };


    option && myChart.setOption(option);

</script>
</html>